<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>消息管理</title>
	<link rel="stylesheet" href="${ctx}/static/css/bootstrap-duallistbox.min.css" />
	<script src="${ctx}/static/js/jquery.bootstrap-duallistbox.min.js"></script>
	<script>
	    var selected_list_ddlIds_str = "";
	</script>
</head>

<body>

	<div class="main-content-inner">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="${ctx}/welcome">主页</a>
				</li>
				<li class="active">消息</li>
			</ul>
		</div>	
		
		<div class="page-content">
			
			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>	
			
			<div class="page-header">
				<h1>
					消息
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						<c:if test="${action eq 'create'}">新增</c:if>
						<c:if test="${action eq 'update'}">修改</c:if>消息
					</small>
				</h1>
			</div>		
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">

							<form id="inputForm" action="${ctx}/msg/${action}" method="post" class="form-horizontal">
								<input type="hidden" name="id" id="id" value="${msg.id}"/>
								<input type="hidden" name="op" id="op" value="${action}"/>
								<input type="hidden" name="tag" id="tag" value=""/>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">类型: </label>
									<div class="col-sm-2">
										<select class="chosen-select form-control" id="type" name="type" data-placeholder="" onchange="typeOnChange(this.value)">
										   <c:if test="${action eq 'create'}">
										     <!--  <option value="" selected="selected">请选择</option> --> 
											  <option value="1" selected="selected">别名</option>
											 <!--   <option value="2">广播</option>
											  <option value="3">全部</option> --> 
										   </c:if>
										   <c:if test="${action eq 'update'}">
											  <option value="1" <c:if test="${msg.type eq '1' }">selected="selected"</c:if>>别名</option>
											   <!--  
											  <option value="2" <c:if test="${msg.type eq '2' }">selected="selected"</c:if>>广播</option>
											  <option value="3" <c:if test="${msg.type eq '3' }">selected="selected"</c:if>>全部</option>
											  --> 
										   </c:if>
										</select>
									</div>
								</div>
								
								<script type="text/javascript">
								     function typeOnChange(object){
								    	 $('#userdiv').show();
								    	 <!--
								    	 if(object=='1'){
								    		 $('#userdiv').show();
								    	 }else if(object=='2'){
								    		 $('#userdiv').show();
								    	 }else if(object=='3'){
								    		 $('#userdiv').hide();
								    	 }
								    	 -->
								     }
								</script>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">分类: </label>
									<div class="col-sm-2">
										<select class="chosen-select form-control" id="mode" name="mode" data-placeholder="">
										   <c:if test="${action eq 'create'}">
											  <option value="1" selected="selected">普通消息</option>
											  <option value="2">温馨提示</option>
										   </c:if>
										   <c:if test="${action eq 'update'}">
											  <option value="1" <c:if test="${msg.mode eq '1' }">selected="selected"</c:if>>普通消息</option>
											  <option value="2" <c:if test="${msg.mode eq '2' }">selected="selected"</c:if>>温馨提示</option>
										   </c:if>
										</select>
									</div>
								</div>
								
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">设备: </label>
									<div class="col-sm-2">
										<select class="chosen-select form-control" id="device" name="device" data-placeholder="">
										   <c:if test="${action eq 'create'}">
											  <option value="1">Android</option>
											  <option value="2">IOS</option>
											  <option value="3">All</option>
										   </c:if>
										   <c:if test="${action eq 'update'}">
											  <option value="1" <c:if test="${msg.deltag eq '1' }">selected="selected"</c:if>>Android</option>
											  <option value="2" <c:if test="${msg.deltag eq '2' }">selected="selected"</c:if>>IOS</option>
											  <option value="3" <c:if test="${msg.deltag eq '3' }">selected="selected"</c:if>>All</option>
										   </c:if>
										</select>
									</div>
								</div>
								
								
								<div class="form-group" style="display:block" id="userdiv">
									<label class="col-sm-3 control-label no-padding-right" for="duallist"> 选择发送人： </label>
									<div class="col-sm-4">
										<!-- #section:plugins/input.duallist -->
										<select multiple="multiple" size="10" name="ddlIds" id="duallist" class="form-control required"></select>
										<!-- /section:plugins/input.duallist -->
										<div class="hr hr-16 hr-dotted"></div>
									</div>
								</div>
								
								
								<div class="form-group">
									<div>
									    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">内容:</label>
										<textarea class="form-control" id="msg" name="msg" placeholder="内容" style="margin: 0px -2.01563px 0px 0px; height:150px; width:400px;">
									       ${msg.msg}
									    </textarea>
									</div>
								</div>
								
								
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<button id="submit_btn" class="btn btn-info" type="submit">
											<i class="ace-icon fa fa-check bigger-110"></i>
											发送
										</button>

										&nbsp; &nbsp; &nbsp;
										<button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											返回
										</button>
									</div>
								</div>
								
							</form>
							
						</div>
					</div>			
				</div>
			</div>
		</div>
	</div>
	<script>
		$(document).ready(function(){
			var demo1 = $('select[name="ddlIds"]').bootstrapDualListbox({
				infoTextEmpty: '未选择',
				filterPlaceHolder: '过滤条件',
				filterTextClear: '显示全部',
				infoTextFiltered: '<span class="label label-purple label-lg">已过滤</span>',
			    preserveSelectionOnMove: 'moved',
			    moveOnSelect: false,
			});
			var container1 = demo1.bootstrapDualListbox('getContainer');
			container1.find('.btn').addClass('btn-white btn-info btn-bold');
			$("input.form-control").eq(0).bind("keyup",function(){
				var tel = $(this).val();
				if(tel){
					$.ajax({
						type:'get',
						url:'${ctx}/msg/ajaxuserlist',
						data:'tel=' + $(this).val(),
						success:function(data) {    
						    var result = data.data;
						    $("#bootstrap-duallistbox-nonselected-list_ddlIds").empty();
						    $("#bootstrap-duallistbox-selected-list_ddlIds").empty();
				        	$("#bootstrap-duallistbox-selected-list_ddlIds option").each(function() {    
				        	    var text = $(this).text();  
				        	    var value = $(this).val();  
				        	    selected_list_ddlIds_str += "<option value='" + value + "'>" + text + "</option>";
				        	}); 
				        	
				        	var demo1 = $('select[name="ddlIds"]').bootstrapDualListbox({
								infoTextEmpty: '未选择',
								filterPlaceHolder: '过滤条件',
								filterTextClear: '显示全部',
								infoTextFiltered: '<span class="label label-purple label-lg">已过滤</span>',
							    preserveSelectionOnMove: 'moved',
							    moveOnSelect: false,
							});
				        	for(var i=0; i<data.data.length; i++) {
					        	$("#duallist").append("<option value='" + result[i].id + "'>" + result[i].user.loginName + "</option>");
					        }
				        	demo1.bootstrapDualListbox('refresh'); 
				        	$("#bootstrap-duallistbox-selected-list_ddlIds").append(selected_list_ddlIds_str);
					     }
					});
				}
		    });
			
		});
    </script>		
</body>
</html>